<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div o-Container>
    <div style="display: flex;justify-content: space-between;">
      <div class="LevelPanel">
        <o-tree v-bind:source="tree.buildList" v-bind="{ loaded: loadTree, checked: checkCompany, clicked: clickCompany }">
          <template v-slot:content="levelData">
            <div :class="'iconfont Level_A'" :title="JSON.stringify(levelData.row.node)">
              <!-- <span class="Title">{{levelData.row.node.IDCode}}:{{levelData.row.node.DisplayName}}</span>-->
              <span class="Title">{{ levelData.row.node.Name }}</span>
            </div>
            <!--            {{levelData.row.package.data}}-->
          </template>
        </o-tree>
      </div>
      <div class="ManagementPanel">
        <o-list v-bind:source="list.department" v-bind="{ created: create, modified: modify, searched: search }" />
      </div>
    </div>
    <o-dialog v-bind:source="panel" v-bind="{ opened: load, closed: load }">
      <template slot="content">
        <o-item v-bind:source="item.department" v-bind="{ saved: save, backed: back }"></o-item>
      </template>
    </o-dialog>
  </div>
</template>

<script>
export default {
  name: "mms_platform_department_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
  data() {
    return {
      octopus: this.$parent.octopus,
      list: {
        department: {
          data: {
            id: 62, // 菜单表的八爪鱼ID
            cellData: [
              { name: "CompanyID", width: 200, filterKey: "=" },//公司
              { name: "Code", width: 120, searchKey: "LIKE" },//部门名称
              { name: "Name", width: 170, searchKey: "LIKE" },//部门名称
              { name: "Note", width: 300, searchKey: "LIKE" },//创建时间
              { name: "CreateDate", width: 160, searchKey: "BETWEEN" },//创建时间
            ],
            // height: "500px",    // 自定义控件高度
          }
        },
      },
      item: {
        department: {
          // 以下参数默认由组件内部创建，但是如果有需要，开发人员可在这里提前设置，组件将按照您的预期渲染。
          data: {
            id: 62,
            value: "",
            cellData: [
              { name: "CompanyID" },//公司
              { name: "Code" },//部门名称
              { name: "Name" },//部门名称
              { name: "CreateDate" },//创建时间
              { name: "Note" },//创建时间
            ],
          },

        },
      },
      tree: {
        // TODO 树组件属性，本组件支持八爪鱼多数据源组合嵌套。
        buildList: {
          title: "公司层级架构",
          filterKey: "Name",  // 查询过滤的字段名
          show: {
            root: false,
            checkbox: false,  // 不显示复选框
            title: false,
            filter: true,     // 显示查询功能
          },
          auto: {
            expand: false,    // 节点自动收缩
          },
          data: {
            id: 232,                   // 数据源：公司表
            // primaryKey: "ID",
            parentKey: "ParentID",     // 是否是层级，如果标记了这个属性，则说明该数据源是层级数据源。
            parentValue: "0",          // "A_17",
            cellData: [
              { name: "Address" },	// 联系地址
              { name: "Contacts" },	// 联系人
              { name: "ContactsMail" },	// 联系邮箱
              { name: "ContactsMobile" },	// 联系电话
              { name: "CreateTime" },	// 创建时间
              { name: "ExpiredTime" },	// 过期时间
              { name: "FullName" },	// 公司全称
              { name: "Introduction" },	// 公司介绍
              { name: "LicenseNumber" },	// 营业执照号码
              { name: "Logo" },	// 公司图标
              { name: "Name" },	// 简称
              { name: "ParentID" },	// 父级公司
              { name: "SourceTypeID" },	// 来源
              { name: "UniqueCode" },	// 唯一识别码
            ],
            // height: "500px",    // 自定义控件高度
            width: "200px",
          }
        }
      },
      panel: {
        visible: false,
      },
    }
  },
  created: function () {
    this.init();
  },
  methods: {
    init: function () {
      let url = this.octopus.vue.$route.path;

      // this.tree.buildList.data.parentValue = "";
      // this.tree.buildList.control.load();

      // MMS
      if (url.indexOf("MMS/Organization/Department/List") > 0) {
        //
      }
      // MDM
      else {
        // alert(this.octopus.passport.authorization.company);
        // this.octopus.tools.parseCell(this.list.department.data, "CompanyID").searchKey = null;
        this.tree.buildList.show.root = true;
        this.tree.buildList.data.parentValue = this.octopus.passport.authorization.company;
        // this.tree.buildList.data.parentValue = this.octopus.passport.authorization.company == 1 ? "" : this.octopus.passport.authorization.company;
      }

      this.octopus.tools.parseCell(this.list.department.data, "CompanyID").filterValue = this.octopus.passport.authorization.company;
      // this.octopus.tools.parseCell(this.list.department.data, "CompanyID").filterValue = this.octopus.passport.authorization.company == 1 ? "" : this.octopus.passport.authorization.company;
    },
    create: function () {
      this.item.department.data.value = null;
      this.item.department.control.load();
      this.panel.visible = true;
    },
    output: function (data) {
      // 导出以后，回调这里给客户端操作。
      // 核心思想是cellData包含search数据（不管有没有），回传以后发送export指令，后台api会直接返回导出的数据提供下载。
      alert("export: get cell data is " + JSON.stringify(data));
    },
    search: function (cell) {
    },
    modify: function (row) {
      this.item.department.data.value = row.ID;
      this.item.department.control.load();
      this.panel.visible = true;
    },
    view: function (row) {
      alert("view key: " + JSON.stringify(row));
    },
    del: function (row) {
      alert("del key: " + JSON.stringify(row));
    },
    save: function (data) {
      this.octopus.tips.success(data);
      // 刷新list
      this.list.department.control.load();
      this.back();
    },
    back: function () {
      this.panel.visible = false;
    },
    // 加载树控件默认值。
    loadTree: function (tree_data) {
      let o = this;
      // console.error(tree_data)
      // let data = this.octopus.tools.parseCell(this.item.role.data, "BuildingList").defaultValue;
      // if (data) {
      //   let tree_list = [];
      //   data.map(item => {
      //     tree_list.push("C_" + item)
      //   });
      //   // console.warn(tree_list);
      //   // let data_list = data;
      //   // console.error("LT：" + data + "，LIST：" + data_list);
      //   this.tree.buildList.control.setCheckedKeys(tree_list);
      // }

      // 设置默认选中的公司（可复数）
      this.tree.buildList.control.setCheckedKeys([16]);
      // 设置默认公司（单值）
      this.tree.buildList.control.setCurrentKey(this.octopus.passport.authorization.company);


      console.error(this.tree.buildList.control.getCurrentNode());
    },
    // 已经选中的公司
    checkCompany: function (node) {
      // 获取选中的节点
      let o = this;
      // this.tree_nodes = node.checkedNodes;

      this.company_list = [];

      // 循环选中的节点
      node.checkedNodes.map(item => {
        addTreeNode(item);
      });
      // 循环半选中的节点
      node.halfCheckedNodes.map(item => {
        addTreeNode(item);
      });

      function addTreeNode(item) {
        o.company_list.push(item.ID);
      }

      console.error(JSON.stringify(o.company_list));
      // this.octopus.tools.parseCell(this.item.role.data, "ProjectList").defaultValue = this.project_list;
      // this.octopus.tools.parseCell(this.item.role.data, "BuildingList").defaultValue = this.building_list;
    },
    // 点击公司时触发
    clickCompany: function (data) {
      // alert(JSON.stringify(data.ID));
      this.octopus.tools.parseCell(this.list.department.data, "CompanyID").filterValue = data.ID;
      this.list.department.control.load();

      // console.error(JSON.stringify(data));
    }
  },
  props: ["oData"]
}
</script>

<style scoped>
.ManagementPanel {
    width: calc(100% - 217px);
    height: 100vh;
}
</style>

